 <template>
 <!--分页 begin-->
 <div style="padding:10px 20px;" class="overflowY">
   <base-card title="头像上传">
     <el-upload
       class="avatar-uploader"
       action="https://jsonplaceholder.typicode.com/posts/"
       :show-file-list="false"
       :on-success="handleAvatarSuccess"
       :before-upload="beforeAvatarUpload">
       <img v-if="imageUrl" :src="imageUrl" class="avatar">
       <i v-else class="el-icon-plus avatar-uploader-icon"></i>
     </el-upload>
   </base-card>
   <base-card title="说明">
     <code style="margin-top: 15px;">
       <span style="width: 100%;display: inline-block;">1、使用 before-upload 限制用户上传的图片格式和大小</span>
       <span style="width: 100%;display: inline-block;">2、on-success	文件上传成功时的钩子</span>
       <span style="width: 100%;display: inline-block;">3、on-error	文件上传失败时的钩子</span>
       <span style="width: 100%;display: inline-block;">4、on-progress	文件上传时的钩子</span>
       <span style="width: 100%;display: inline-block;">5、on-change	文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用</span>
       <span style="width: 100%;display: inline-block;">6、before-upload	上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。</span>
       <span style="width: 100%;display: inline-block;">7、before-remove	删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止上传。</span>
       <span style="width: 100%;display: inline-block;">8、list-type	文件列表的类型</span>
       <span style="width: 100%;display: inline-block;">9、auto-upload	是否在选取文件后立即进行上传</span>
     </code>
   </base-card>
   <base-card title="HTML">
      <pre><code>&lt;el-upload<br>     class="avatar-uploader"<br>     action="https://jsonplaceholder.typicode.com/posts/"<br>     :show-file-list="false"<br>     :on-success="handleAvatarSuccess"<br>     :before-upload="beforeAvatarUpload"&gt;<br>     &lt;img v-if="imageUrl" :src="imageUrl" class="avatar"&gt;<br>     &lt;i v-else class="el-icon-plus avatar-uploader-icon"&gt;&lt;/i&gt;
&lt;/el-upload&gt;</code></pre>
   </base-card>
   <base-card title="JS">
     <pre><code>export default {<br>  data() {<br>    return {<br>      imageUrl: ''<br>    }<br>  },<br>  methods: {<br>    handleAvatarSuccess(res, file) {<br>      this.imageUrl = URL.createObjectURL(file.raw)<br>    },<br>    beforeAvatarUpload(file) {<br>      const isJPG = file.type === 'image/jpeg'<br>      const isLt2M = file.size / 1024 / 1024 &lt; 2<br><br>      if (!isJPG) {<br>        this.$message.error('上传头像图片只能是 JPG 格式!')<br>      }<br>      if (!isLt2M) {<br>        this.$message.error('上传头像图片大小不能超过 2MB!')<br>      }<br>      return isJPG &amp;&amp; isLt2M<br>    }<br>  }<br>}</code></pre>
   </base-card>
   <base-card title="CSS">
     <pre><code>&lt;style&gt;<br>   .avatar-uploader .el-upload {<br>     border: 1px dashed #d9d9d9;<br>     border-radius: 6px;<br>     cursor: pointer;<br>     position: relative;<br>     overflow: hidden;<br>   }<br>   .avatar-uploader .el-upload:hover {<br>     border-color: #409EFF;<br>   }<br>   .avatar-uploader-icon {<br>     font-size: 28px;<br>     color: #8c939d;<br>     width: 178px;<br>     height: 178px;<br>     line-height: 178px;<br>     text-align: center;<br>   }<br>   .avatar {<br>     width: 178px;<br>     height: 178px;<br>     display: block;<br>   }<br> &lt;/style&gt;</code></pre>
   </base-card>
 </div>
 <!--分页 end-->
</template>

<script>
import BaseCard from '@/components/BaseCard/BaseCard'
export default {
  components: {
    BaseCard
  },
  data() {
    return {
      imageUrl: ''
    }
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    }
  }
}
</script>
 <style>
   .avatar-uploader .el-upload {
     border: 1px dashed #d9d9d9;
     border-radius: 6px;
     cursor: pointer;
     position: relative;
     overflow: hidden;
   }
   .avatar-uploader .el-upload:hover {
     border-color: #409EFF;
   }
   .avatar-uploader-icon {
     font-size: 28px;
     color: #8c939d;
     width: 178px;
     height: 178px;
     line-height: 178px;
     text-align: center;
   }
   .avatar {
     width: 178px;
     height: 178px;
     display: block;
   }
 </style>

